import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_vant_kit/main.dart';
import 'package:provider/provider.dart';
import 'package:shoes_shop/api/api.dart';
import 'package:shoes_shop/core/const.dart';
import 'package:shoes_shop/core/flutter_icons.dart';
import 'package:shoes_shop/core/utils.dart';
import 'package:shoes_shop/models/public_provider_model.dart';
import 'package:shoes_shop/models/shoe_model.dart';
import 'package:shoes_shop/pages/detail_page.dart';
import 'package:shoes_shop/widgets/app_clipper.dart';
import 'dart:math' as math;

class HomePage extends StatelessWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('homebuild');
    //调用provider providerGetGoodsList 接口
    if (Provider.of<PublicProviderModel>(context).goodsList.length == 0) {
      Provider.of<PublicProviderModel>(context).providerGetGoodsList();
    }
    if (Provider.of<PublicProviderModel>(context).userInfo['openid'] == null) {
      getUserInfo(context);
    }
    return Scaffold(
      // appBar: AppBar(
      //   backgroundColor: Colors.transparent,
      //   elevation: 0,
      //   leading: Icon(
      //     FlutterIcons.menu,
      //     color: Colors.black,
      //   ),
      // ),
      body: ListView(
        children: [
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 40.w, vertical: 15.w),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "热门推荐",
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 32,
                  ),
                ),
                IconButton(
                  icon: Icon(
                    FlutterIcons.search,
                    color: Colors.black26,
                  ),
                  onPressed: () => {},
                ),
              ],
            ),
          ),
          Container(
            height: 300,
            margin: EdgeInsets.symmetric(vertical: 16),
            child: Consumer<PublicProviderModel>(
              builder: (context, val, child) => ListView.builder(
                itemCount: val.goodsList.length,
                scrollDirection: Axis.horizontal,
                physics: BouncingScrollPhysics(),
                padding: EdgeInsets.only(right: 16),
                itemBuilder: (context, index) {
                  return GestureDetector(
                    onTap: () {
                      Navigator.of(context).push(CupertinoPageRoute(
                        builder: (_) => DetailPage(
                          val.goodsList[index],
                          'hot'
                        ),
                      )
                          // MaterialPageRoute(
                          //   builder: (_) => DetailPage(
                          //     shoeList[index],
                          //   ),
                          // ),
                          );
                    },
                    child: Container(
                      width: 230,
                      margin: EdgeInsets.only(left: 16),
                      child: Stack(
                        children: [
                          Padding(
                            padding: const EdgeInsets.only(top: 25),
                            child: _buildBackground(index, 230, val.goodsList),
                          ),
                          Positioned(
                            bottom: 130,
                            right: 10,
                            child: Hero(
                              tag: "hot${val.goodsList[index].sId}",
                              child: Transform.rotate(
                                angle: -math.pi / 7,
                                child: Image.network(
                                  val.goodsList[index].imgs[0],
                                  width: 220,
                                  // image: AssetImage(
                                  //     "assets/${shoeList[index].imgs[0]}"),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
          SizedBox(height: 16),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "最近新品",
                  style: TextStyle(
                    color: Colors.black54,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  "查看更多",
                  style: TextStyle(
                    color: AppColors.deepBlue,
                  ),
                ),
              ],
            ),
          ),
          SizedBox(
            height: 24,
          ),
          ...Provider.of<PublicProviderModel>(context).goodsList.map(
            (data) {
              return GestureDetector(
                onTap: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (_) => DetailPage(
                        data,
                        'new'
                      ),
                    ),
                  );
                },
                child: Container(
                  margin: EdgeInsets.only(left: 16, right: 16, bottom: 10),
                  padding: EdgeInsets.symmetric(vertical: 16, horizontal: 24),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.all(
                        Radius.circular(15),
                      ),
                      boxShadow: [
                        BoxShadow(
                            color: Colors.black12,
                            blurRadius: 10,
                            spreadRadius: 1)
                      ]),
                  child: Row(
                    children: [
                      Hero(
                        tag: 'new${data.sId}',
                        child: Image.network(
                          data.imgs[0],
                          width: 100,
                          height: 60,
                        ),
                      ),
                      SizedBox(
                        width: 16,
                      ),
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Container(
                              width: MediaQuery.of(context).size.width * .4,
                              child: Text(
                                "${data.title}",
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(fontWeight: FontWeight.bold),
                              ),
                            ),
                            Text(
                              "${data.brand}",
                              style: TextStyle(
                                color: Colors.black26,
                                height: 1.5,
                              ),
                            ),
                          ],
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 12),
                        child: Price(
                          value: data.price,
                          fontWeight: FontWeight.bold,
                        ),
                      )
                    ],
                  ),
                ),
              );
            },
          ),
        ],
      ),
    );
  }

  Widget _buildBackground(
      int index, double width, List<ShoeModelData> shoeList) {
    return ClipPath(
      clipper: AppClipper(cornerSize: 25, diagonalHeight: 100),
      child: Container(
        // color: shoeList[index].color,
        // color: AppColors.blueColor,
        color: Color(int.parse('FF${shoeList[index].color}', radix: 16)),
        width: width,
        child: Stack(
          children: [
            Padding(
              padding: EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(top: 20),
                    child: Icon(
                      shoeList[index].brand == "Nike"
                          ? FlutterIcons.nike
                          : FlutterIcons.converse,
                      size: 30,
                      color: Colors.white,
                    ),
                  ),
                  Expanded(child: SizedBox()),
                  Container(
                    width: 125,
                    child: Text(
                      "${shoeList[index].title}",
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ),
                  SizedBox(height: 8),
                  Price(
                    value: shoeList[index].price,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                  SizedBox(height: 16),
                ],
              ),
            ),
            Positioned(
              bottom: 0,
              right: 0,
              child: Container(
                width: 50,
                height: 50,
                decoration: BoxDecoration(
                    color: getFadeColor(Color(
                        int.parse('FF${shoeList[index].color}', radix: 16))),
                    borderRadius:
                        BorderRadius.only(topLeft: Radius.circular(10))),
                child: Center(
                  child: Icon(
                    FlutterIcons.add,
                    color: Colors.white,
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

// class HomePage extends StatefulWidget {
//   @override
//   _HomePageState createState() => _HomePageState();
// }

// class _HomePageState extends State<HomePage>
//     with AutomaticKeepAliveClientMixin {
//   @override
//   bool get wantKeepAlive => true;

//   List<ShoeModelData> shoeList = [];

//   @override
//   void initState() {
//     super.initState();
//     // _getGoodsList();
//   }

//   void _getGoodsList() async {
//     var res = await getGoodsList();
//     setState(() {
//       shoeList = res.data;
//       print('333$shoeList');
//     });
//   }

//   @override
//   Widget build(BuildContext context) {
//     super.build(context);//build方法实现父方法 super.build(context);防止报错
//     return 
//   }

  
// }
